{% extends 'base.html' %}

{% block title %}发布{% endblock %}

{% block head %}
    <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'wangeditor/style.css' %}">
    <script src="{% static 'wangeditor/index.js' %}"></script>
    <script src="{% static 'js/pub_blog.js' %}"></script>
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
{% endblock %}

{% block main %}
    <h2 class="text-center">发布博客</h2>
    <div class="mt-3">
        <form action="" method="POST">
            {% csrf_token %}
            <div class="mb-3">
                <label class="form-label">标题</label>
                <input type="text" name="title" class="form-control">
            </div>
            <div class="mb-3">
                <label class="form-label">分类</label>
                <select name="category" class="form-select" id="category-select">
                    {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label" name="content">内容</label>
                <div id="editor--wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
                <style>
                    #editor—wrapper {
                        border: 1px solid #e0e0e0;
                        border-radius: 8px;
                        overflow: hidden;
                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                    }

                    #toolbar-container {
                        border-bottom: 1px solid #e0e0e0;
                        background-color: #f9f9f9;
                    }

                    #editor-container {
                        height: 500px;
                        background-color: white;
                    }

                    .form-control, .form-select {
                        border-radius: 6px;
                        border-color: #e0e0e0;
                        transition: border-color 0.2s;
                    }

                    .form-control:focus, .form-select:focus {
                        border-color: #2c3e50;
                        box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
                    }

                    .btn-primary {
                        background-color: #2c3e50;
                        border-color: #2c3e50;
                    }

                    .btn-primary:hover {
                        background-color: #1a252f;
                    }
                </style>
            </div>
            <div class="mb-3 text-end">
                <button class="btn btn-warning" id="submit-btn">发布</button>
            </div>
        </form>
    </div>
{% endblock %}

